<template>
	<div class="mobile-dialog-preset">
		<div class="preset-title">
			<svg-icon iconClass="ask" class="icon"></svg-icon>猜你想问
		</div>
		<div class="carousel-container">
			<div class="carousel-list" :style="transform">
				<div v-for="(item, index) of carouselList" :key="index"
					class="carousel-item">
					<div
						v-for="(innerItem, innerIndex) of item" :key="innerIndex"
						class="chatgpt-recommend-question">
						<span class="question-type">{{innerItem.type}}</span>
						<span class="recommend-question ellipsis" @click="postMessage(innerItem)">
							{{innerItem.question}}
						</span>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import { mapState, mapMutations, mapActions } from "vuex"
export default {
	name: 'MobileDialogPreset',
	data() {
		return {
			itemIndex: 0,
			translateObj: {
				0: 0,
				1: -6.36,
				2: -12.72
			},
			carouselList: [
				[{
					type: '保险问答',
					question: '我们为什么要买保险？'
					// question: '测试一下'
				},{
					type: '保险资讯',
					question: '人工智能在保险业的发展？'
				},{
					type: '专业指导',
					question: '如何获取电子保单？'
				}],
				// [{
				// 	type: '保险问答',
				// 	question: '我们为什么要买保险？'
				// },{
				// 	type: '保险资讯',
				// 	question: '人工智能在保险业的发展？'
				// },{
				// 	type: '专业指导',
				// 	question: '如何获取电子保单？'
				// }],
				// [{
				// 	type: '保险问答',
				// 	question: '我们为什么要买保险？'
				// },{
				// 	type: '保险资讯',
				// 	question: '人工智能在保险业的发展？'
				// },{
				// 	type: '专业指导',
				// 	question: '如何获取电子保单？'
				// }],
			]
		}
	},
	mounted() {
		// setInterval(() => {
		// 	if (this.itemIndex === 2) {
		// 		this.itemIndex = 0
		// 	} else {
		// 		this.itemIndex++
		// 	}
		// }, 2000)
	},
	computed:{
		...mapState('aia-mobile', ['mobileSessionInfo']),
		transform() {
			return {
				// transform: `translate3d(${this.translateObj[this.itemIndex]}rem, 0, 0)`
			}
		}
	},
	methods: {
		...mapMutations('aia-mobile', ['pushMessageList']),
		...mapActions('aia-mobile', ['postMsgMobile']),
		// 发送消息
		postMessage(item) {
			let inputValue = item.question
			this.postMsgMobile({
				aicc_msg_type: "text",
				aicc_msg_content: {
					content: inputValue
				},
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.mobile-dialog-preset{
	padding: 0.24rem 0.2rem 0.24rem;
	background: #FFFFFF;
	border-radius: 0.16rem;
	position: relative;
	&::before{
		content: " ";
    border-style: solid;
    border-color: transparent;
    border-right-color: #fff;
    border-width: 0.14rem;
    border-left-width: 0;
    position: absolute;
    left: -0.14rem;
    top: 0.3rem;
	}
	.preset-title{
		font-size: 0.32rem;
    font-weight: bold;
    margin-bottom: 0.08rem;
		.icon{
			width: 0.44rem;
			height: 0.44rem;
			margin-right: 0.2rem;
		}
	}
	.carousel-container{
		overflow: hidden;
		.carousel-list{
			width: 22.5rem;
			overflow: hidden;
			transition: transform 0.5s ease 0s;
			.carousel-item{
				width: 6.36rem;
				float: left;
				display: block;
				.chatgpt-recommend-question{
					cursor: pointer;
					background: #fff;
					border-radius: 0.4rem;
					padding: 0.2rem 0;
					margin: 0.16rem 0;
					border: 0.02rem solid rgba(232,242,255,1);
					border-radius: 0.4rem;
					display: flex;
					align-items: center;
					padding-left: 0.7rem;
					.question-type{
						background: #8EA2FF;
						border-radius: 0.2rem;
						color: #FFFFFF;
						height: 0.4rem;
						line-height: 0.4rem;
						padding: 0 0.12rem;
						margin-right: 0.28rem;
						font-size: .20rem;
					}
					.recommend-question{
						color: #1F75FE;
						flex: 1;
					}
				}
			}
		}
	}
}

</style>